<template>
  <view class="redDetails">
    <view class="bg">
      <i @click="goBack(1)" class="goBack"></i>
    </view>
    <view class="comRed">
      <view class="userInfo">
        <view>
          <up-avatar
            class="avatar"
            mode="aspectFill"
            :src="headName.picture"
            size="30"
          ></up-avatar>
          {{ headName.nick_name }}
        </view>
        <view>{{ redInfo?.Content.remarks || "-" }}</view>
      </view>
      <view class="numRed">
        <view>
          {{ redText }}
        </view>
      </view>
    </view>
    <view class="redList">
      <view v-for="(iteam, idx) in redInfo?.item" :key="idx">
        <view>
          <view>{{ iteam.receive.nick_name }}</view>
          <view>${{ iteam.money }}</view>
        </view>
        <view>
          <view>{{ formattingTime(iteam.receive.time, 3) }}</view>
          <view v-if="bestLuck(iteam)">手气最佳</view>
        </view>
      </view>
    </view>
    <view class="tips"> 未领取的红包，将于24小时后发起退款 </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { RedEnvelopeInFo } from "@/api/ImApi";
import moment from "moment-timezone";

let redInfo = ref<any>();
let headName = ref<any>();
uni.setStorageSync("submitSendRed", 1);
onLoad(async (e: any) => {
  const query = decodeURIComponent(e.data);
  let data = JSON.parse(query);
  console.log(data);
  headName.value = data.headName;
  //这里参数有问题...data.item
  let res = await RedEnvelopeInFo({...data.item});
  redInfo.value = {
    ...data.item,
    ...res,
  };
  console.log(redInfo.value);
  redPacketStatus();
});

// 判断手气最佳的用户
const bestLuck = (iteam: any) => {
  if (redInfo.value.item?.length <= 1) {
    return false;
  }
  const bestUser = redInfo.value.item.reduce((best: any, current: any) => {
    return current.money > best.money ? current : best;
  });
  return (
    iteam.money === bestUser.money &&
    redInfo.value?.item.length == redInfo.value?.redenvelope_num
  );
};

let redText = ref<any>("");

// 判断已领取多少，是否领完
const utcOffsetMinutes = Number(uni.getStorageSync("utcOffsetMinutes") || 0);

const redPacketStatus = () => {
  const redData = redInfo.value;
  if (!redData) {
    redText.value = "红包数据为空";
    return;
  }

  // 当前时间，已应用 UTC 偏移
  const now = moment().utcOffset(utcOffsetMinutes);

  // 红包过期时间，已应用 UTC 偏移
  const expirationTime = moment(redData.add_time)
    .utc()
    .utcOffset(utcOffsetMinutes)
    .add(24, "hours");

  // 计算红包状态文本
  const getStatusText = (
    receivedItems: number,
    totalNum: number,
    receivedMoney: number,
    totalMoney: number
  ) => {
    let text = `已领取${receivedItems}/${totalNum}个，共$${receivedMoney.toFixed(
      2
    )}/$${totalMoney.toFixed(2)}`;

    if (receivedItems === totalNum) {
      text += "，红包已抢光";
    }

    if (now.isAfter(expirationTime)) {
      text += "，该红包已过期";
    }

    return text;
  };

  // 判断红包类型
  if (redData.redenvelope_type === 1) {
    redText.value =
      `${redData.redenvelope_num}个红包共$${redData.redenvelope_money}` +
      (now.isAfter(expirationTime) ? "，该红包已过期" : "");
  } else {
    const totalNum = redData.redenvelope_num;
    const totalMoney = redData.redenvelope_money;
    const receivedItems = redData.item.length;
    const receivedMoney = redData.item.reduce(
      (sum: number, item: any) => sum + item.money,
      0
    ); // 已领取的金额

    redText.value = getStatusText(
      receivedItems,
      totalNum,
      receivedMoney,
      totalMoney
    );
  }
};
</script>
<style scoped lang="scss">
@import "../../static/scss/red.scss";
</style>
